revision:
srcset allows you to define a list of different image resources along with size information so that the browser can pick the most appropriate image based on the actual device's resolution. Each comma-separated item in srcset has: image URL, an empty space, the actual width of the image or display density, either using display density descriptor (for example, 1.5x, 2x etc.) or using width descriptors (for example, 450w). This is the width of the image in pixels.
The syntax for display density descriptors is straightforward: srcset provides a comma-separated list of image resources along with display density it should be used (for example 1x, 2x etc.). When using width descriptor, the syntax is similar to the display density descriptor, but instead of display density values, we provide the actual width of the image.
syntax: <source srcset="URL">
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
The srcset defines the set of images we will allow the browser to choose between, and what size each image is. Each set of image information is separated from the previous one by a comma. sizes defines a set of media conditions (e.g. screen widths) and indicates what image size would be best to choose, when certain media conditions are true. The "sizes" attribute contains a comma-separated list. Each item in the list describes the size of the image in relation to the viewport. Using the "sizes attribute" with srcset provides the browser with enough information to start downloading the right image as soon as it sees an <img> tag in HTML without waiting for styles sheets to complete downloading and parsing.
So, with these attributes in place, the browser will a/xlook at its device width, b/ work out which media condition in the sizes list is the first one to be true, c/ look at the slot size given to that media query, d/ load the image referenced in the srcset list that has the same size as the slot or, if there isn't one, the first image that is bigger than the chosen slot size.
<div>
<img src="../images/flowers.jpg"
sizes="(max-width: 200px) 50vw, (min-width: 201px) 20vw"
srcset="../images/flowers.jpg 500w, img_pink_flowers.jpg 50w" alt="great picture">
</div>
If you need art direction - that is, to explicitly dictate the browser to load an entirely different image based on browser viewport or image format support, you need the <picture> element. The picture element should be used to achieve: art direction, different format support, or color theme example
The <picture> element consists of zero or more "source" and one "img" element. The browser will consider each source element to choose the best match based on device display and image format support. Each source accepts "media" and "type" attributes in addition to "srcset" and "sizes". The "media attribute" contains a media condition like CSS media query. If a source's element media condition evaluates to false, the browser skips that source. If none of the source element's media conditions evaluate to true, the browser loads the image specified in the "img tag". The "type attribute" specified the MIME type of the resource URL(s) in the source's srcset. If the browser supports that MIME type, it will load the resource. Otherwise, it will skip that source and move to the next. If none of the source's type is supported by the browser, the image in "img" is loaded.
Resize the browser window to load different images.
<picture>
<source media="(min-width:650px)" srcset="../images/img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="../images/img_white_flower.jpg">
<img src="../images/img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
These hints allow the server to fulfill a particular request with the most optimal resource. The latter is known as "content negotiation".Client hints provide this information via HTTP request headers. Not every request has these HTTP headers. You will have to explicitly tell the browser to include these client hints using a "meta" tag.
If the width property is set to a percentage and the height property is set to "auto", the image will be responsive and scale up and down. If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size. If you want to restrict a responsive image to a maximum size, use the max-width property with a pixel value of your choice.
Background images can also respond to resizing and scaling: if the background-size property is set to "contain", the background image will scale, and try to fit the content area. However, the image will keep its aspect ratio (the proportional relationship between the image's width and height). If the background-size property is set to "100% 100%", the background image will stretch to cover the entire content area. If the background-size property is set to "cover", the background image will scale to cover the entire content area. Notice that the "cover" value keeps the aspect ratio, and some part of the background image may be clipped.
<img src="1.jpg" alt="holiday" class="responsive">
<style>
.responsive { width: 80%; height: auto; }
</style>